<template>
  <div class="app-container">
    <el-form ref="form" :model="maintask" label-width="120px">
      <el-form-item label="任务名称">
        <el-input v-model="maintask.name" />
      </el-form-item>
      <el-form-item label="任务简介">
        <el-input v-model="maintask.info" type="textarea" />
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input v-model="maintask.description" type="textarea" />
      </el-form-item>
      <el-form-item label="子任务顺序">
        <el-radio-group v-model="maintask.subTaskOrder">
          <el-radio-button label="顺序" />
          <el-radio-button label="随机" />
        </el-radio-group>      </el-form-item>
      <el-form-item label="物品类型">
        <el-tabs v-model="maintask.itemType" type="border-card">
          <el-tab-pane label="碎片">
            <el-form-item label="数量" label-width="50px">
              <el-input type="Number" v-model="maintask.num" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="拼图">
            <!--            <img src="../../assets/img/pintu.png" alt="">-->
          </el-tab-pane>
        </el-tabs>
      </el-form-item>

      <el-form-item label="子任务">
        <div style="border: 1px solid #ccc;padding: 30px">

          <div style="margin-bottom: 30px;padding-left: 30px">
            <el-button type="primary" @click="addSubtask">新增</el-button>
            <el-button type="success" @click="submit">保存</el-button>
          </div>
          <div class="block">
            <el-timeline>
              <el-timeline-item v-for="(item,index) in subtask" :key="index" :timestamp="'任务 '+(index+1)" placement="top">
                <el-card>
                  <el-form ref="ruleForm" label-width="" class="demo-ruleForm">
                    <el-form-item label="任务名称">
                      <el-input v-model="item.name" />
                    </el-form-item>
                    <el-form-item label="任务简介">
                      <el-input v-model="item.info" type="textarea" />
                    </el-form-item>
                    <el-form-item label="任务描述">
                      <el-input v-model="item.description" type="textarea" />
                    </el-form-item>
                    <el-form-item label="获取方式" />
                    <el-tabs type="border-card">
                      <el-tab-pane label="识别图">
                        <imageUpload @file="item.picture=$event" />
                      </el-tab-pane>
                    </el-tabs>
                    <el-form-item label="奖励">
                      <el-input v-model="item.award" type="number" />
                    </el-form-item>
                    <el-form-item style="padding-top: 30px">
                      <el-button type="primary" @click="delTask(index)">删除</el-button>
                    </el-form-item>
                  </el-form>
                </el-card>
              </el-timeline-item>
            </el-timeline>

          </div>

          <div style="margin-bottom: 30px;padding-left: 30px">
            <el-button type="primary" @click="addSubtask">新增</el-button>
            <el-button type="success" @click="submit">保存</el-button>
          </div>

        </div>

      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import imageUpload from '@/components/imageUpload/index'
export default {
  components: {
    imageUpload
  },
  data() {
    return {
      maintask: {
        name: '',
        info: '',
        description: '',
        itemType: '1',
        num: '',
        subTaskOrder: '顺序'
      },
      subtask: [
      ],
      addSubtaskData: {
        name: '',
        info: '',
        description: '',
        type: '',
        picture: ''
      }
    }
  },
  methods: {
    submit() {
      const { subtask, maintask } = this.$data
      console.log(maintask)
      console.log(subtask)
    },

    addSubtask() {
      const subtask = JSON.parse(JSON.stringify(this.subtask))
      subtask.push(JSON.parse(JSON.stringify(this.addSubtaskData)))
      this.subtask = subtask
      console.log(subtask)
      this.$message.success('新增成功')
    },
    delTask(index) {
      const subtask = JSON.parse(JSON.stringify(this.subtask))
      console.log(subtask)
      subtask.splice(index, 1)
      this.subtask = subtask
      this.$message.success('删除成功')
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

